<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app1"></div>
    <div id="app2"></div>
    <hr/>
    <div id="app3"></div>
    <script src="../react-lib/babel.min.js"></script>
    <script src="../react-lib/react.development.js"></script>
    <script src="../react-lib/react-dom.development.js"></script>
    <!-- 使用 PropTypes 进行类型检查 -->
    <script src="../react-lib/prop-types.js"></script> 
    <script type="text/babel"> 
    /**
    * 
    */
     class App extends React.Component{
         constructor(props){
             super(props) 
         } 
        render(){ 
            return (
                <div> 
                    <LoginForm/>
                </div>
            )
        } 
    }
    class LoginForm extends React.Component{
        constructor(props){
            super(props)

            // 初始化数据
            this.state = {
                pwd:''
            }

            this.handleSubmit = this.handleSubmit.bind(this)
            this.handleChange = this.handleChange.bind(this)
        } 
        handleSubmit(event){
            alert(`username: ${this.username.value},pwd: ${this.state.pwd}`)
            // 阻止默认行为
            event.preventDefault()
        }
        /**
         * 处理数据变更
         * React思想不建议操作非受控组件，推荐使用受控组件实现
        */
        handleChange(event){
            this.setState({
                pwd:event.target.value
            })
        }
        render(){ 
            return (
                <div>
                    <form onSubmit={this.handleSubmit}>
                        非受控组件-
                        username: <input type="text" ref={input => this.username = input}/>
                        <br/>
                        受控组件-
                        password: <input type="password" value={this.state.pwd} onChange={this.handleChange}/>
                        <button type="submit" >Login</button>
                    </form>
                </div>
            )
        } 
    }
    // LoginForm.propTypes = {
    //     todos: PropTypes.array.isRequired,
    //     addTodo: PropTypes.func.isRequired
    // }
    ReactDOM.render(<App/>,document.getElementById('app1'))
    </script>
</body>
</html>